<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
                <!-- 添加分类dialog -->
                <el-dialog title="添加分类" :visible.sync="addCatDialogVisible" width="50%" @close="addCateDialogClased">
                    <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
                        <el-form-item label="分类名称:" prop="cat_name">
                            <el-input v-model="addCateForm.cat_name"></el-input>
                        </el-form-item>
                        <el-form-item label="父级分类:">
                            <!-- options指定数据源 -->
                            <el-cascader expand-trigger="hover" v-model="selectedKeys" :options="parentList"
                                :props="cascaderProps" @change="parentCateChanged" clearable change-on-select>
                            </el-cascader>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addCatDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addCate">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- tree-table表格 -->
                <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false"
                    :show-index="true" index-text="#" border>
                    <!-- 是否有效 -->
                    <template slot="isok" slot-scope="scope">
                        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
                        <i class="el-icon-error" style="color:red" v-else></i>
                    </template>
                    <!-- 排序 -->
                    <template slot="order" slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                        <el-tag type="warning" size="mini" v-else>三级</el-tag>
                    </template>
                    <!-- 操作 -->
                    <template slot="opt" slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                    </template>
                </tree-table>
                <!-- 分页区域 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum" :page-sizes="[1, 3, 5, 10]" :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                queryInfo: {
                    //查询条件
                    type: 3,
                    pagenum: 1,
                    pageSize: 5
                },
                catelist: [], //商品分类的数据列表,默认为空
                total: 0, //总数据条数
                addCatDialogVisible: false,//dialog
                parentList: [], //父级分类列表
                // 指定级联选择器的配置对象
                cascaderProps: {
                    value: 'cat_id',
                    label: 'cat_name',
                    children: 'children'
                },
                selectedKeys: [], //选中父级分类的id数组
                addCateForm: {
                    cat_name: '', //分类的id
                    cat_pid: 0, //父级分类id
                    cat_level: 0, //分类的等级默认一级分类
                }, //分类表单数据对象
                addCateFormRules: {
                    cat_name: [
                        { required: true, message: '请输入分类名称 ', trigger: 'blur' }
                    ]
                },//验证表单分类规则
                columns: [
                    {
                        label: '分类名称',
                        prop: 'cat_name'
                    },
                    {
                        label: '是否有效',
                        type: 'template', // 将当前列自定义为模板列
                        template: 'isok' // 表示当前这列使用模板名称标识符
                    },
                    {
                        label: '排序',
                        type: 'template', // 将当前列自定义为模板列
                        template: 'order' // 表示当前这列使用模板名称标识符
                    },
                    {
                        label: '操作',
                        type: 'template', // 将当前列自定义为模板列
                        template: 'opt' // 表示当前这列使用模板名称标识符
                    }
                ] //treetable指定列的定义
            }
        },
        created() {
            this.getCateList();
        },
        methods: {
            // 获取商品分类数据
            async getCateList() {
                const { data: res } = await this.$http.get('categories/', { params: this.queryInfo });
                if (res.meta.status == 200) {
                    this.catelist = res.data;
                } else {
                    this.$message.error('获取商品分类失败');
                }
            },
            // 分页监听pagesize改变
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                this.getCateList();
            },
            // 分页监听pageNum改变
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage;
                this.getCateList();
            },
            // 控制dialog开关
            showAddCateDialog() {
                //获取父级分类数据列表
                this.getParentCateList();
                this.addCatDialogVisible = true;
            },
            // 获取父级分类数据的列表
            async getParentCateList() {
                const { data: res } = await this.$http.get('categories', { params: { type: 2 } });
                if (res.meta.status == 200) {
                    this.parentList = res.data;
                    console.log(this.parentList)
                } else {
                    this.$message.error('获取父级数据失败');
                }
            },
            // 选择项发生变化触发
            parentCateChanged() {
                if (this.selectedKeys.length > 0) {
                    this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
                    this.addCateForm.cat_level = this.selectedKeys.length
                    return
                } else {
                    this.addCateForm.cat_pid = 0;
                    this.addCateForm.cat_level = 0;
                }
            },
            // 添加按钮,添加新分类
            addCate() {
                this.$refs.addCateFormRef.validate(async valid => {
                    if (!valid) {
                        return
                    } else {
                        const { data: res } = await this.$http.post('categories', this.addCateForm);
                        if (res.meta.status == 201) {
                            this.getCateList();
                            this.addCatDialogVisible = false;
                            this.$message.success('添加分类成功');
                        } else {
                            this.$message.error('添加失败!')
                        }
                    }
                })
            },
            //监听对话框关闭事件重置数据
            addCateDialogClased() {
                this.$refs.addCateFormRef.resetFields();
                this.selectedKeys = [];
                this.addCateForm.cat_level = 0;
                this.addCateForm.cat_pid = 0;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>